<html>
<head>
    <title>哆啦A梦</title>
</head>
<body style="width:1200px;height: 1200px;background-color:#66B3FF;overflow: hidden;position: absolute;" >
    <div style="width: 600px;height:600px;margin: 0 auto;position: absolute;">
        <div class="leftHand"></div>
        <div class="rightHand"></div>
        <div class="head"></div>
        <div class="leftLeg1"></div>
        <div class="leftLeg"></div>
        <div class="rightLeg"></div>
        <div class="bodyy"></div>
        <div class="face"></div>
        <div class="lefteye"></div>
        <div class="lefteye1"></div>
        <div class="lefteye2"></div>
        <div class="righteye"></div>
        <div class="righteye1"></div>
        <div class="righteye2"></div>
        <div class="nose"></div>
        <div class="nose1"></div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="mouse1"></div>
        <div class="mouse2"></div>
        <div class="mouse3"></div>
        <div class="onaka"></div>
        <div class="l"></div>
        <div class="lindang"></div>
        <div class="lindang1"></div>
        <div class="lindang2"></div>
        <div class="lindang3"></div>
        <div class="pocket"></div>
        <div class="leftFist"></div>
        <div class="rightFist"></div>
        <div class="rightLeg1"></div>
    </div>
    <div id="c" style="top:0;left:660;width:600px;height: 700px;white-space: pre;font-size: 15px;position: absolute"></div>
    <div id="start" onclick="rs()" style="visibility:visible;font-family:Consolas;color:crimson;font-size:200px;top:30%;left:40%;width:600px;height:600px;position:absolute;text-shadow: 15px 15px 10px pink">START</div>
<script>
    str =".head{width:310px;height:310px;position:absolute;left:48.8%;top:29%;margin-left:-9.3%;margin-top:-13%;background-color:#0080FF;border-radius:999px;border:1px solid black;}.face{width:250px;height:250px;position:absolute;left:43.9%;top:26%;background-color:white;border-radius:999px;border:1px solid black;}.lefteye{width:60px;height:72px;position:absolute;left:51.7%;top:20%;background-color:white;border-radius:50%;border:1px solid black;}.leftEye1{width:14px;height:25px;position:absolute;left:58.3%;top:23.8%;background-color:black;border-radius:50%;border:1px solid black;}.leftEye2{width:5px;height:8px;position:absolute;left:59.4%;top:25.2%;background-color:white;border-radius:50%;border:1px solid black;}.rightEye{width:60px;height:72px;position:absolute;left:62%;top:19%;background-color:white;border-radius:50%;border:1px solid black;}.rightEye1{width:14px;height:25px;position:absolute;left:62.8%;top:23.2%;background-color:black;border-radius:50%;border:1px solid black;}.rightEye2{width:5px;height:8px;position:absolute;left:63.2%;top:24.8%;background-color:white;border-radius:50%;border:1px solid black;}.nose{width:30px;height:30px;position:absolute;left:59.9%;top:29.8%;background-color:red;border-radius:50%;border:1px solid black;}.nose1{width:8px;height:8px;position:absolute;left:61.0%;top:31%;background-color:white;border-radius:50%;}.line{width:1px;height:50px;position:absolute;left:62.9%;top:35.2%;transform:rotate(-3deg);background-color:white;border-left:2px solid #000000;margin-left:1px;}.line1{width:60px;height:1px;position:absolute;left:46.5%;top:32%;background-color:white;border-bottom:1px solid #000000;margin-left:1px;transform:rotate(12deg);}.line2{width:80px;height:1px;position:absolute;left:43.2%;top:38.2%;background-color:white;border-bottom:1px solid #000000;margin-left:1px;transform:rotate(-1deg);}.line3{width:80px;height:1px;position:absolute;left:43.5%;top:44%;background-color:white;border-bottom:1px solid #000000;margin-left:1px;transform:rotate(-12deg);}.line4{width:60px;height:1px;position:absolute;left:68.8%;top:31%;background-color:white;border-bottom:1px solid #000000;margin-left:1px;transform:rotate(-17deg);}.line5{width:80px;height:1px;position:absolute;left:69.8%;top:36%;background-color:white;border-bottom:1px solid #000000;margin-left:1px;transform:rotate(-8deg);}.line6{width:90px;height:1px;position:absolute;left:70%;top:41%;background-color:white;border-bottom:1px solid #000000;margin-left:1px;transform:rotate(1deg);}.mouse1{width:180px;height:86px;position:absolute;left:50.1%;top:48%;margin-left:-0.5px;background-color:red;border-radius:0px 0px 84px 84px;transform:rotate(-7deg);}.mouse2{width:102px;height:100px;position:absolute;left:56.7%;top:51.2%;margin-left:-0.5px;background-color:orangered;border-radius:46px 46px 0px 0px;height:46px;transform:rotate(-7deg);}.mouse3{width:100px;height:40px;position:absolute;left:57.5%;top:56%;margin-left:-0.5px;background-color:orangered;border-radius:0px 0px 100% 100%;transform:rotate(-7deg);}.l{width:200px;height:10px;position:absolute;left:52.1%;top:68%;margin-left:-15px;margin-top:-15px;background-color:crimson;border-radius:999px;border:1px solid black;transform:rotate(-5deg);}.lindang{width:40px;height:40px;position:absolute;left:65.1%;top:68.6%;margin-left:-15px;margin-top:-15px;background-color:yellow;border-radius:999px;border:1px solid black;}.lindang1{width:12px;height:10px;position:absolute;left:67.5%;top:70.6%;margin-left:-15px;margin-top:-15px;background-color:black;border-radius:5px;border:1px solid black;transform:rotate(-8deg);}.lindang2{width:2px;height:17px;position:absolute;left:66.2%;top:70.2%;background-color:black;transform:rotate(-4deg);}.onaka{width:155px;height:135px;position:absolute;left:56.7%;top:68%;margin-left:-15px;margin-top:-15px;background-color:white;border-radius:50%;border:1px solid black;transform:rotate(-6deg);}.pocket{width:96px;height:82px;position:absolute;left:60.1%;top:78.6%;margin-left:-0.5px;background-color:white;border-radius:0px 0px 60px 60px;border:1px solid black;height:41px;transform:rotate(-7deg);}.leftFist{width:70px;height:70px;position:absolute;left:30.1%;top:51%;margin-left:-15px;margin-top:-15px;background-color:white;border-radius:999px;border:1px solid black;}.rightFist{width:70px;height:70px;position:absolute;left:93.3%;top:48%;margin-left:-15px;margin-top:-15px;background-color:white;border-radius:999px;border:1px solid black;}.leftHand{width:60px;height:200px;position:absolute;left:43.3%;top:50.3%;margin-left:-15px;margin-top:-15px;background-color:#0080FF;border-radius:50%;transform:rotate(-52deg);border:1px solid black;}.rightHand{width:60px;height:280px;position:absolute;left:79.7%;top:48.3%;margin-left:-15px;margin-top:-15px;background-color:#0080FF;border-radius:50%;transform:rotate(38deg);border:1px solid black;}.bodyy{width:200px;height:220px;position:absolute;left:50.6%;top:55%;background-color:#0080FF;transform:rotate(-2deg);}.leftLeg{width:100px;height:140px;position:absolute;left:52.8%;top:82.3%;margin-left:-15px;margin-top:-15px;background-color:#0080FF;border-radius:50%;transform:rotate(13deg);}.leftLeg1{width:100px;height:90px;position:absolute;left:50.4%;top:94.5%;margin-left:-15px;margin-top:-15px;background-color:white;border-radius:50%;border:1px solid black;}.rightLeg{width:100px;height:140px;position:absolute;left:70.8%;top:80.0%;margin-left:-15px;margin-top:-15px;background-color:#0080FF;border-radius:50%;transform:rotate(-53deg);}.rightLeg1{width:100px;height:120px;position:absolute;left:77.7%;top:84.5%;margin-left:-15px;margin-top:-15px;background-color:white;border-radius:50%;border:1px solid black;transform:rotate(18deg);}"
    str1 = str.split('')
    style= document.createElement('style');
    document.getElementsByTagName('HEAD').item(0).appendChild(style);
    x = document.getElementById('c')
    x1 = document.getElementById('start');
    const sleep = (delay) => new Promise((resolve) => setTimeout(resolve,delay))
    count = 0;
    t = 10;
    const rs = async () => {
        x1.style.visibility = 'hidden';
        for(i in str1){
            m = parseInt(i)
            if(count==3 ||count==7 || count==11 || count==15 || count==19 || count==23 || count==27 || count==31 || count==35 ||count==39 ||count==41 || count==44){
                style.innerHTML = style.innerText +str1[i];
                x.innerHTML = str1[i]
                count++
                await sleep(t)
            }
            else if(str1[i] == '{'){
                style.innerHTML = style.innerText +str1[i];
                x.innerHTML = x.innerText + str1[i] +'\n&nbsp&nbsp&nbsp&nbsp';
                await sleep(t);
            }
            else if (str1[i] == ';' && str1[(m+1)] != '}'){
                style.innerHTML = style.innerText +str1[i];
                x.innerHTML = x.innerText + str1[i] +'\n&nbsp&nbsp&nbsp&nbsp';
                await sleep(t);
            }
            else if(str1[i] == '}'){
                count = count + 1;
                console.log(count);
                style.innerHTML = style.innerText +str1[i];
                x.innerHTML = x.innerText + '\n' + str1[i] + '\n';
                await sleep(t);
            }
            else{
                style.innerHTML = style.innerText +str1[i];
                x.innerHTML = x.innerText + str1[i];
                await sleep(t);
            }
        }
    }
</script>
</body>
</html>